<script setup lang="ts">
import { ref } from 'vue';
import { useAsyncData } from '@/home/hooks/async-data';
import { useFetch } from '@/home/hooks/fetch';
import type { HotOrg, HotRepo, HotUser, PagedResponse, HotColumn, HotArticle } from './hot';
import Pageable from './Pageable.vue';
import Developer from './Developer.vue';
import Repo from './Repo.vue';
import Org from './Org.vue';
import Column from './Column.vue';
import News from './News.vue';
const { $fetch } = useFetch();

// HotUser
const currUserPage = ref(1);
const { data: hotUsers, refresh: userRefresh, pending: userLoading } = useAsyncData<PagedResponse<HotUser>>(
  'home:templates:2:banner:users',
  () => $fetch<PagedResponse<HotUser>>('/developer/hot_developers', { data: { pageNo: currUserPage.value, size: 4 } }),
  {
    cache: false,
    watch: [() => currUserPage.value],
  },
);

// HotRepo
const currRepoPage = ref(1);
const { data: hotRepos, pending: repoLoading } = useAsyncData<PagedResponse<HotRepo>>(
  'home:templates:2:banner:repos',
  () => $fetch<PagedResponse<HotRepo>>('/warehouse/hot_warehouse', { data: { pageNo: currRepoPage.value, size: 4 } }),
  {
    cache: false,
    watch: [() => currRepoPage.value],
  },
);

// HotOrg
const currOrgPage = ref(1);
const { data: hotOrgs, refresh: orgRefresh, pending: orgLoading } = useAsyncData<PagedResponse<HotOrg>>(
  'home:templates:2:banner:orgs',
  () => $fetch<PagedResponse<HotOrg>>('/org/hot_orgs', { data: { pageNo: currOrgPage.value, size: 3 } }),
  {
    cache: false,
    watch: [() => currOrgPage.value],
  },
);

// Column
const currColumnPage = ref(1);
const { data: hotColumn, refresh: columnRefresh, pending: columnLoading } = useAsyncData<PagedResponse<HotColumn>>(
  'home:templates:2:banner:column',
  () => $fetch<PagedResponse<HotColumn>>('/popSpecialColumn/getColumnPage', { method: 'post', data: { pageNum: currColumnPage.value, pageSize: 4 } }),
  {
    cache: false,
    watch: [() => currColumnPage.value],
  },
);

// News
const currNewsPage = ref(1);
const { data: hotNews, refresh: newsRefresh, pending: newsLoading } = useAsyncData <PagedResponse<HotArticle>>(
  'home:templates:2:banner:news',
  () => $fetch<PagedResponse<HotArticle>>('/information/v3/home_info_list', { method: 'post', data: { pageNum: currNewsPage.value, pageSize: 3 } }),
  {
    cache: false,
    watch: [() => currNewsPage.value],
  },
);
</script>

<template>
  <div class="bg-hex-fafafa pb-40 pt-40">
    <div class="first-row-only grid grid-cols-[1fr_1fr_1fr] ml-auto mr-auto max-w-1200 grid-gap-40">
      <!-- 推荐专栏 -->
      <Pageable :title="$t('home.hot.title4')" :total-page="hotColumn?.pages ?? 0" :loading="columnLoading" v-model="currColumnPage" v-if="hotColumn?.records.length">
        <div class="flex flex-col gap-24">
          <Column
            v-for="column in hotColumn?.records"
            :key="column.columnId"
            v-bind="column"
            @change-follow="columnRefresh"
          />
        </div>
      </Pageable>

      <!-- 精选资讯 -->
      <Pageable :title="$t('home.hot.title5')" :total-page="hotNews?.pages ?? 0" :loading="newsLoading" link="/explore/journalism/prime" v-model="currNewsPage" v-if="hotNews?.records.length">
        <div class="flex flex-col gap-24">
          <News
            v-for="article in hotNews?.records"
            :key="article.informationId"
            v-bind="article"
            @change-follow="newsRefresh"
          />
        </div>
      </Pageable>

      <!-- 热门仓库 -->
      <Pageable :title="$t('home.hot.title2')" :total-page="hotRepos?.pages ?? 0" :loading="repoLoading" link="/explore/repository" v-model="currRepoPage">
        <div class="flex flex-col gap-24">
          <Repo
            v-for="repo in hotRepos?.records"
            :key="repo.name"
            v-bind="repo"
          />
        </div>
      </Pageable>

      <!-- 精选组织 -->
      <Pageable :title="$t('home.hot.title3')" :total-page="hotOrgs?.pages ?? 0" :loading="orgLoading" link="/explore/organization" v-model="currOrgPage">
        <div class="flex flex-col gap-32">
          <Org
            v-for="org in hotOrgs?.records"
            :key="org.name"
            v-bind="org"
            @change-follow="orgRefresh"
          />
        </div>
      </Pageable>

      <!-- 优秀开发者 -->
      <Pageable :title="$t('home.hot.title1')" :total-page="hotUsers?.pages ?? 0" :loading="userLoading" link="/explore/developer" v-model="currUserPage">
        <div class="flex flex-col gap-24">
          <Developer
            v-for="user in hotUsers?.records"
            :key="user.userId"
            v-bind="user"
            @change-follow="userRefresh"
          />
        </div>
      </Pageable>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.first-row-only > *:nth-child(n+4) {
  display: none;
}
</style>
